import React, { Component } from "react";
import { Button, Space, Table, Tag, Row, Col, Drawer } from "antd";
import { categoryGet } from "../../api/course";
import RoleForm from "./components/role-form";
import { roleDelBatch, roleGet, userGet } from "../../api/user";
import { routeMapTool } from "../../utils/tools";
import { mainRoutes } from "../../router";
import UserForm from "./components/role-user";
let routeMap = {};

export default class User extends Component {
  state = {
    isOpen: false,
    userList: [],
    recordData: null,
    delIds: [], //记录待删除的数据id
  };
  columns = [
    {
      title: "用户ID",
      dataIndex: "objectId",
      key: "objectId",
    },
    {
      title: "用户名称",
      dataIndex: "username",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            size="small"
            onClick={() => {
              this.handleDrawer(true, record);
            }}
          >
            编辑
          </Button>
          <Button type="primary" danger size="small">
            删除
          </Button>
        </Space>
      ),
    },
  ];
  componentDidMount() {
    userGet().then((res) => {
      this.setState({ userList: res.data.results });
    });
    routeMap = routeMapTool(mainRoutes);
  }

  //批量删除
  handleDelBatch = () => {
    let { delIds, userList } = this.state;
    roleDelBatch(delIds).then((res) => {
      let arr = userList.filter((item) => !delIds.includes(item.objectId));
      this.setState({
        userList: arr,
      });
    });
  };
  render() {
    let { isOpen, recordData, delIds } = this.state;
    return (
      <>
        <Row justify="start">
          <Col span={8}>
            <Button
              type="primary"
              onClick={() => {
                this.handleDrawer(true);
              }}
            >
              新增账号
            </Button>
            {delIds.length ? (
              <Button type="primary" danger onClick={this.handleDelBatch}>
                批量删除
              </Button>
            ) : (
              ""
            )}
          </Col>
        </Row>
        <Drawer
          title="分配账号"
          placement="right"
          closable={true}
          onClose={() => {
            this.handleDrawer(false, null);
          }}
          open={isOpen}
        >
          <UserForm />
        </Drawer>
        <Table
          columns={this.columns}
          dataSource={this.state.userList}
          rowKey="objectId"
        />
      </>
    );
  }
}
